<template>
  <div class="add-address">
      <div class="add-address-header">
        <router-link to="/address" tag="span">
          <van-icon name="arrow-left" />
        </router-link>
        <span>添加收货地址</span>
        <span></span>
      </div>
      <div>
        <van-address-edit
            :area-list="areaList"
            show-postal
            show-delete
            show-set-default
            show-search-result
            :search-result="searchResult"
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave"
            @delete="onDelete"
            
        />
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { AddressEdit ,Area } from 'vant';
import { Toast } from 'vant';
import areaList from "../util/address"
Vue.use(AddressEdit);
Vue.use(Area);
export default {
  data() {
    return {
      areaList,
      addressList:[],
      searchResult: [],
     
    };
  },
  methods: {
    onSave(content) {
      let len = content.tel + '1'
      let addr = {
          id: len,
          name: content.name,
          tel: content.tel,
          city:content.city,
          county:content.county,
          is_default:content.isDefault,
          postal_code:content.postalCode,
          province:content.province,
          area_code:content.areaCode,
          address:content.province+content.city+content.county+content.addressDetail
       }
      // console.log(addr)
      // this.addressList.push(addr)
      // console.log(this.$store)
      // this.$store.dispatch('address' , addr)
      // console.log(this.$store.state)
      this.$store.state.addList.push(addr)
      Toast('添加成功');
      this.$router.push('/address')
    },
    onDelete() {
      Toast('delete');
    },
  },

}
</script>

<style lang="stylus" scoped>
@import '../assets/border.styl'
.add-address
  height 100%
  background-color #f2f2f2
  margin-bottom .44rem
  .add-address-header
        width 100%
        height .88rem
        font-size .3rem
        background-color #fff
        display flex 
        justify-content space-between
        align-items center
        $border(0 0 1px 0,#eee)
</style>